<template>
  <div class="tableRow">
    <el-row class="select-list" v-permission="'system:logs:query'">
      <el-form :inline="true" ref="selectForm" :model="selectFormModel" label-position="right"
               label-width="80px" size="mini">
        <el-form-item label="操作模块" prop="title">
          <el-input v-model="selectFormModel.title" placeholder="操作模块" style="width: 200px" clearable
                    @keyup.enter.native="onSearch"/>
        </el-form-item>
        <el-form-item label="操作人员" prop="operName">
          <el-input v-model="selectFormModel.operName" placeholder="操作人员" style="width: 200px" clearable
                    @keyup.enter.native="onSearch"/>
        </el-form-item>
        <el-form-item label="操作类型" prop="businessType">
          <el-select value="" v-model="selectFormModel.businessType" placeholder="操作类型" style="width: 200px">
            <el-option label="新增" value="1"/>
            <el-option label="修改" value="2"/>
            <el-option label="删除" value="3"/>
            <el-option label="授权" value="4"/>
            <el-option label="导出" value="5"/>
            <el-option label="导入" value="6"/>
            <el-option label="强退" value="7"/>
            <el-option label="生成代码" value="8"/>
            <el-option label="清空数据" value="9"/>
          </el-select>
        </el-form-item>
        <el-form-item label="操作状态" prop="status">
          <el-select value="" v-model="selectFormModel.status" placeholder="操作状态" style="width: 200px">
            <el-option label="成功" value="0"/>
            <el-option label="失败" value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" plain round @click="onSearch">搜索
          </el-button>
          <el-button type="warning" icon="el-icon-refresh" size="mini" plain round
                     @click="onRefreshSelectForm">重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="toolbar">
      <el-button type="danger" icon="el-icon-delete" :disabled="dialog.isBatchRemoveDisabled" size="mini" plain
                 @click="handleBatchDelete" v-permission="'system:logs:remove'"> 删除
      </el-button>
      <el-button type="danger" icon="fa fa-remove" size="mini" @click="handleClean"
                 v-permission="'system:logs:clean'"> 清空
      </el-button>
      <el-button type="warning" icon="el-icon-download" size="mini" plain @click="handleExport"
                 v-permission="'system:logs:export'"> 导出
      </el-button>
    </el-row>
    <data-table ref="dataTable"
                :api="getLogsList"
                :options="options"
                :columns="columns"
                :operates="operates"
                :query="selectFormModel"
                @handle-selection-change="handleSelectionChange"
    />
    <el-dialog :title="dialog.title"
               :visible.sync="dialog.dialogVisible"
               :modal-append-to-body="false"
               :destroy-on-close="false"
               width="600px">
      <el-row class="text item">
        <el-col :span="4">
          操作模块：
        </el-col>
        <el-col :span="20">
          <span> {{ dialog.row.title + " / " + businessType(dialog.row) }}</span>
        </el-col>
      </el-row>
      <el-row class="text item">
        <el-col :span="4">
          登录信息：
        </el-col>
        <el-col :span="20">
          <span> {{ dialog.row.operName + " / " + dialog.row.operIp + " / " + dialog.row.operLocation }}</span>
        </el-col>
      </el-row>
      <el-row class="text item">
        <el-col :span="4">
          请求地址：
        </el-col>
        <el-col :span="20">
          <span>{{ dialog.row.requestMethod }} {{ dialog.row.operUrl }}</span>
        </el-col>
      </el-row>
      <el-row class="text item">
        <el-col :span="4">
          操作方法：
        </el-col>
        <el-col :span="20">
          <span> {{ dialog.row.method }}</span>
        </el-col>
      </el-row>
      <el-row class="text item">
        <el-col :span="4">
          请求参数：
        </el-col>
        <el-col :span="20">
          <el-alert
            :title="dialog.row.operParam"
            :closable="false"
            type="info">
          </el-alert>
        </el-col>
      </el-row>
      <el-row class="text item" v-if="dialog.row.status===0">
        <el-col :span="4">
          返回结果：
        </el-col>
        <el-col :span="20">
          <el-alert
            :title="dialog.row.jsonResult"
            :closable="false"
            type="info">
          </el-alert>
        </el-col>
      </el-row>

      <el-row class="text item" v-else>
        <el-col :span="4">
          错误信息：
        </el-col>
        <el-col :span="20">
          <el-alert
            :title="dialog.row.errorMsg"
            :closable="false"
            type="info">
          </el-alert>
        </el-col>
      </el-row>
      <el-row class="text item">
        <el-col :span="4">
          状态：
        </el-col>
        <el-col :span="8">
          <el-tag v-if="dialog.row.status===0" type="success"> 成功</el-tag>
          <el-tag v-else type="danger"> 失败</el-tag>
        </el-col>
        <el-col :span="4">
          耗时：
        </el-col>
        <el-col :span="8">
          <el-tag v-if="dialog.row.processingTime<=100" type="success"> {{ dialog.row.processingTime }} ms
          </el-tag>
          <el-tag v-else-if="dialog.row.processingTime<=500" type="warning"> {{ dialog.row.processingTime }}
            ms
          </el-tag>
          <el-tag v-else type="danger"> {{ dialog.row.processingTime }} ms</el-tag>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogVisible  = false" size="medium">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import {Component, Ref, Vue} from 'vue-property-decorator';
import DataTable from '@/components/DataTable/DataTable.vue';
import {cleanLogs, exportLogs, getLogsList, removeLogs} from '@/api/logs';

@Component({
  components: {
    DataTable
  }
})
export default class Logs extends Vue {
  @Ref('dataTable') private dataTable: any;
  @Ref('selectForm') private selectForm: any;
  private getLogsList: any = getLogsList;
  /*搜索框*/
  selectFormModel: any = {
    title: '',
    operName: '',
    businessType: '',
    status: '',
  };
  dialog: any = {
    dialogVisible: false,
    isBatchRemoveDisabled: true,
    title: '对话框',
    formData: [],
    row: ''
  };
  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: true, // 是否支持列表项选中功能
  };
  operates: any = {
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '详情',
        type: 'warning',
        icon: 'el-icon-search',
        disabled: () => {
          return false;
        },
        method: (index, row) => {
          this.dialog.dialogVisible = true;
          this.dialog.row = row;
          this.dialog.title = '操作日志详情';
        }
      }
    ]
  };
  columns: any = [
    {label: 'ID', prop: 'id', sortable: 'custom'},
    {label: '系统模块', prop: 'title', sortable: 'custom'},
    {
      label: '业务类型', prop: 'businessType', sortable: 'custom', render: (createElement, row) => {
        if (row && row.row && row.row.businessType === 1) {
          return createElement('el-tag', {
              attrs: {
                type: 'success'
              }
            }, ['新增']
          );
        } else if (row && row.row && row.row.businessType === 2) {
          return createElement('el-tag', {
            attrs: {
                type: 'success'
              }
            }, ['修改']
          );
        } else if (row && row.row && row.row.businessType === 3) {
          return createElement('el-tag', {
              attrs: {
                type: 'warning'
              }
            }, ['删除']
          );
        } else if (row && row.row && row.row.businessType === 4) {
          return createElement('el-tag', {
              attrs: {
                type: 'success'
              }
            }, ['授权']
          );
        } else if (row && row.row && row.row.businessType === 5) {
          return createElement('el-tag', {
              attrs: {
                type: 'info'
              }
            }, ['导出']
          );
        } else if (row && row.row && row.row.businessType === 6) {
          return createElement('el-tag', {
              attrs: {
                type: 'info'
              }
            }, ['导入']
          );
        } else if (row && row.row && row.row.businessType === 7) {
          return createElement('el-tag', {
              attrs: {
                type: 'warning'
              }
            }, ['强退']
          );
        } else if (row && row.row && row.row.businessType === 8) {
          return createElement('el-tag', {}, ['生成代码']
          );
        } else if (row && row.row && row.row.businessType === 9) {
          return createElement('el-tag', {
              attrs: {
                type: 'warning'
              }
            }, ['清空数据']
          );
        } else {
          return createElement('el-tag', {
              attrs: {
                type: 'danger'
              }
            }, ['其他']
          );
        }
      }
    },
    {label: '操作人员', prop: 'operName', sortable: 'custom'},
    {label: '部门', prop: 'deptName', sortable: 'custom'},
    {label: '主机', prop: 'operIp', sortable: 'custom', showOverflowTooltip: true},
    {label: '操作地点', prop: 'operLocation', sortable: 'custom', showOverflowTooltip: true},
    {
      label: '操作状态', prop: 'status', sortable: 'custom', render: (createElement, row) => {
        if (row && row.row && row.row.status === 0) {
          return createElement('el-tag', {
              attrs: {
                type: 'success'
              }
            }, ['成功']
          );
        } else if (row && row.row && row.row.status === 1) {
          return createElement('el-tag', {
            attrs: {
                type: 'danger'
              }
            }, ['失败']
          );
        } else {
          return createElement('el-tag', {
              attrs: {
                type: 'danger'
              }
            }, ['未知']
          );
        }
      }
    },
    {label: '操作时间', prop: 'operTime', sortable: 'custom', showOverflowTooltip: true},
  ];

  /*搜索*/
  onSearch(): void {
    this.dataTable.refresh();
  }

  /*重置*/
  onRefreshSelectForm(): void {
    //恢复搜索默认信息
    this.selectForm.resetFields();
    this.onSearch();
  }


  /*批量删除*/
  handleBatchDelete(): void {
    this.$confirm('确定要删除选定的操作日志吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const ids: Array<any> = [];
      this.dialog.formData.forEach((item, index) => {
        ids[index] = item.id;
      });
      return removeLogs({'ids': ids});
    }).then((response: any) => {
      this.dataTable.refresh();
      this.$message.success(response.msg);
    }).catch((e) => {
      console.error(e);
    });
  }

  /*清空*/
  handleClean(): void {
    this.$confirm('确定要清空所有操作日志吗？【此操作不可逆】', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    }).then(() => {
      return cleanLogs();
    }).then((response: any) => {
      this.dataTable.refresh();
      this.$message.success(response.msg);
    }).catch((e) => {
      console.error(e);
    });
  }

  /*导出excel*/
  handleExport(): void {
    this.$confirm('确定要导出当前查询的所有操作日志吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }).then(() => {
      this.selectFormModel.pageNum = null;
      this.selectFormModel.pageSize = null;
      this.selectFormModel.orderByColumn = 'id';
      this.selectFormModel.isAsc = 'desc';

      return exportLogs(this.selectFormModel);
    }).then((response: any) => {
      if (response && response.data) {
        (this as any).$download(response.data.fileName);
      }
    }).catch((e) => {
      console.error(e);
    });
  }

  /*选中事件*/
  handleSelectionChange(val): void {
    if (val) {
      this.dialog.isBatchRemoveDisabled = val.length <= 0;
      this.dialog.isBatchEditDisabled = val.length !== 1;
    }
    this.dialog.formData = val;
  }

  businessType(row: any) {
    if (row && row.businessType === 1) {
      return '新增';
    } else if (row && row.businessType === 2) {
      return '修改';
    } else if (row && row.businessType === 3) {
      return '删除';
    } else if (row && row.businessType === 4) {
      return '授权';
    } else if (row && row.businessType === 5) {
      return '导出';
    } else if (row && row.businessType === 6) {
      return '导入';
    } else if (row && row.businessType === 7) {
      return '强退';
    } else if (row && row.businessType === 8) {
      return '生成代码';
    } else if (row && row.businessType === 9) {
      return '清空数据';
    } else {
      return '其他';
    }
  }
}
</script>

<style scoped lang="scss">
.tableRow {
  .el-dialog__body {
    .text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }
  }
}

</style>

